<!DOCTYPE html>
<html>

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="assets/semantic/semantic.min.css">
    <link rel="stylesheet" href="assets/rappid/rappid.min.css">
    <link rel="stylesheet" href="assets/css/material.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>JointJs Demo</title>
</head>

<body>

    <!-- Sidebar Menu -->
    <!--<div class="ui left sidebar vertical fixed inverted menu">
        <a class="item">
            <i class="home icon"></i>
            Link to Home
        </a>
        <a class="item">
            <i class="block layout icon"></i>
            Link to Inner Page
        </a>
        <a class="item">
            <i class="hand pointer icon"></i>
            Link to Other Page
        </a>
        <a class="item">
            <i class="smile icon"></i>
            Open Welcome Popup
        </a>
    </div>-->


    <!-- Page Contents -->
    <div class="pusher">
        <!-- Following Menu -->
        <!--<div class="ui large top fixed inverted menu">
            <div class="ui container">
                <a class="toc item">
                    <i class="sidebar icon"></i>
                </a>
                <div class="ui simple dropdown item">
                    Data Sources
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="data-source-stencils stencil item"></div>
                    </div>
                </div>
                <div class="ui simple dropdown item">
                    Operators
                    <i class="dropdown icon"></i>
                    <div class="menu">

                    </div>
                </div>
                <div class="ui simple dropdown item">
                    Filters
                    <i class="dropdown icon"></i>
                    <div class="menu">

                    </div>
                </div>
                <div class="ui simple dropdown item">
                    Actions
                    <i class="dropdown icon"></i>
                    <div class="menu">

                    </div>
                </div>
                <div class="ui simple dropdown item">
                    Exports
                    <i class="dropdown icon"></i>
                    <div class="menu">

                    </div>
                </div>
            </div>
        </div>-->

        <div class="article">
            <div class="main ui container">
                <div class="ui centered grid">
                    <div class="twelve wide column">
                        <div class="ui segment paper-container">
                            <div id="paper"></div>
                            <div class="ui right dividing rail">
                                <div class="ui header" id="inspector-heading">
                                    INSPECTOR
                                </div>
                                <p id="inspector-text">
                                    Select an item on the paper to get inspector options.
                                </p>
                                <div class="inspector-container"></div>
                            </div>
                            <div class="ui left dividing rail">
                                <div class="stencil-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="ui longer modal">
        <i class="close icon"></i>
        <div class="header">
            JOINT JS WITH SEMANTIC UI
        </div>
        <div class="ui top attached steps">
            <div class="link active step">
                <i class="info circle icon"></i>
                <div class="content">
                    <div class="title">What I have done</div>
                    <div class="description">Integration of Jointjs and Semantic UI</div>
                </div>
            </div>
            <div class="link step">
                <i class="group object icon"></i>
                <div class="content">
                    <div class="title">Features</div>
                    <div class="description">Drag drop, Menu, Sidebar and Events</div>
                </div>
            </div>
        </div>
        <div class="attached scrolling content">
            <p>This demo contains a number of features from Rappid JS. Mainly this is based on a Rappid's example however there are certain features that have been implemented.</p>
            <ul>
                <li>Semantic Ui</li>
                <li>Sidebar</li>
                <li>Modals</li>
                <li>Semantic Layout</li>
            </ul>
        </div>
        <div class="actions">
            <div class="ui positive right labeled icon button">
                Take me to App
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>


    <div class="ui mini modal">
        <div class="header">
            Double Click Event
        </div>
        <div class="content">
            <p>This Event is attached to double click! When an element is clicked, this event is triggered. See console to view clicked element attributes.</p>
        </div>
        <div class="actions">
            <div class="ui positive right labeled icon button">
                OK
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>

    <script src="assets/libraries/jquery.min.js"></script>
    <script src="assets/libraries/lodash.min.js"></script>
    <script src="assets/libraries/backbone.min.js"></script>
    <script src="assets/semantic/semantic.min.js"></script>
    <script src="assets/rappid/rappid.min.js"></script>

    <script src="app/sample-graph.js"></script>
    <script src="app/stencils.js"></script>
    <script src="app/data-source-stencils.js"></script>
    <script src="app/inspector.js"></script>
    <script src="app/selection.js"></script>
    <script src="index.js"></script>
    <script src="app/models/joint.shapes.app.js"></script>

    <script>
        app = new App.MainView({ el: '#app' });
        $(document).ready(function () {
            app.graph.fromJSON(JSON.parse(App.config.sampleGraphs.emergencyProcedure));
        })
    </script>

</body>

</html>